<template>
	<template v-if="isAlready">
		<el-card :shadow="module.props.tabsShadow"
				 :style="'border:'+module.props.tabsBorder+';margin: -10px -25px 0 -25px;'">
		<template #default v-if="drag">
			<el-tabs v-model="activeName" style="height: 100%;" :tab-position="module.props.tabPosition"
					 :type="module.props.styleType" :stretch="module.props.stretch"
					 @tab-remove="removeTab" :before-leave="beforeLeave">
				<el-tab-pane v-for="tab in module.props.tabs" :name="tab.name">
					<template #label>
						<template v-if="activeName===tab.name">
							<el-input v-model="tab.label" style="width: 100px;"></el-input>
						</template>
						<template v-else>
							{{ tab.label }}
						</template>
						<div v-if="tab.closable" style="float:right;text-align: right;cursor: pointer;">
							<el-icon @click='removeTab(tab.name)' style="margin-left: 5px;">
								<component is="el-icon-close"></component>
							</el-icon>
							<el-icon @click='topTab(tab.name)' style="margin-left: 5px;">
								<component is="el-icon-top"></component>
							</el-icon>
						</div>
					</template>
					<draggable class="widgetDragAreaClass" v-model="tab.widgets" animation="300"
							   :style="'height:'+ dragAreaHeight+'px;'"
							   item-key="id" :group="{name:'widgets'}"
							   @change="dragChange(tab.widgets)">
						<template #item="{ element }">
							<ex-drag-widget :model="model" :widgets="tab.widgets"  :widget="element"
											drag></ex-drag-widget>
						</template>
					</draggable>
				</el-tab-pane>
				<el-tab-pane name="addTab">
					<template #label>
						<el-icon size="large" @click="dblClick" style="margin-right: 20px;">
							<component is="el-icon-setting"></component>
						</el-icon>
						<el-icon size="large" @click="addForm = {visible: true}">
							<component is="el-icon-circle-plus"></component>
						</el-icon>
					</template>
				</el-tab-pane>
			</el-tabs>
		</template>
		<template #default v-else>
			<el-main v-show="showModule===false" v-loading="showModule===false" style="height: 300px;"></el-main>
			<el-tabs v-show="showModule"  v-model="activeName" style="height: 100%;" :tab-position="module.props.tabPosition"
					 :type="module.props.styleType" :stretch="module.props.stretch">
				<template v-for="tab in module.props.tabs">
					<el-tab-pane v-if="tab.show" :label="tab.label" :name="tab.name">
						<ex-drag-widget v-for="element in tab.widgets" :model="model" :widgets="tab.widgets"
										:widget="element"></ex-drag-widget>
					</el-tab-pane>
				</template>
			</el-tabs>
		</template>

		</el-card>
		<el-dialog v-if="drag" v-model="addForm.visible" width="500">
			<template #default>
				<div style="width: 90%;">
					<el-form-item label="分组名称" label-width="100">
						<el-input v-model="addForm.label" clearable/>
					</el-form-item>
				</div>
			</template>
			<template #footer>
				<div style="flex: auto;text-align: center;">
					<el-button plain type="primary" @click="addTab">确 认</el-button>
				</div>
			</template>
		</el-dialog>

		<div v-if="drag" class="innerDrawer">
			<el-drawer v-model="drawerModel" size="130px;" direction="btt" :withHeader="false"
					   style="position: absolute;z-index: -1;">
				<el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;" size="small">
					<el-row>
						<el-col :span="6" class="colClass">
							<el-form-item label="风格类型">
								<el-select v-model="module.props.styleType" style="width: 100px;">
									<el-option label="默认" value=""/>
									<el-option label="选项卡" value="card"/>
									<el-option label="卡片化" value="border-card"/>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="6" class="colClass">
							<el-form-item label="选项卡位置">
								<el-select v-model="module.props.tabPosition" style="width: 100px;">
									<el-option label="顶部" value="top"/>
									<el-option label="左侧" value="left"/>
									<el-option label="右侧" value="right"/>
									<el-option label="底部" value="bottom"/>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="6" class="colClass">
							<el-form-item label="">
								<el-col :span="6" class="colClass">
									<el-form-item label="自动填充">
										<el-switch
											v-model="module.props.stretch"
											style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
											:active-value="true"
											:inactive-value="false">
										</el-switch>
									</el-form-item>
								</el-col>
							</el-form-item>
						</el-col>

						<el-col :span="6" class="colClass">
							<el-form-item label="显示边框">
								<el-switch
									v-model="module.props.tabsBorder"
									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									:active-value="1"
									:inactive-value="0">
								</el-switch>
							</el-form-item>
						</el-col>

						<el-col :span="6" class="colClass">
							<el-form-item label="阴影效果">
								<el-select v-model="module.props.tabsShadow" style="width: 100px;">
									<el-option label="显示" value="always"/>
									<el-option label="移入显示" value="hover"/>
									<el-option label="不显示" value="never"/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-drawer>
		</div>
	</template>
</template>
<script>

import draggable from "vuedraggable";
import ExDragWidget from "@/views/asset/card/module/widget/index.vue";

export default {
	name: "mTabs",
	components: {ExDragWidget, draggable},
	props: {
		model: {type: Object, default: {}},
		modules: {type: Array, default: []},
		module: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			showModule:false,
			authFilterStatus:false,
			drawerModel: false,
			dragAreaHeight: 150,
			activeName: '',
			addForm: {
				visible: false,
				label: '',
			},
		}
	},
	watch: {
		module: {
			handler() {
				if(this.drag===false&&this.isAlready===true){
					this.module.props.tabs.forEach(tab => {
						tab.widgets.forEach(widget=>{
							if(widget.props.columns&&widget.props.columns.length>0){
								widget.show = widget.props.columns.filter(column => column.show === true).length > 0;
								widget._authFilterStatus = widget.props.columns.filter(column => column._authFilterStatus !== true).length === 0;
							}else if(widget.props.type==='w-asset-accessory'){//配件tab的显示处理
                widget._authFilterStatus = true;
                if(this.model.isAccessory==='0'&&this.model.financialCode){//如果资产信息不为配件且有财务编码时显示tab
                  widget.show = true;
                }
              }else{
								widget.show = true
								widget._authFilterStatus = true;
							}
						});
						tab.show = tab.widgets.filter(widget => widget.show === true).length > 0;
						tab._authFilterStatus = tab.widgets.filter(widget => widget._authFilterStatus !== true).length === 0;
					});
					this.authFilterStatus = this.module.props.tabs.filter(tab => tab._authFilterStatus !== true).length === 0;
					if(this.authFilterStatus){
						setTimeout(()=>{
							this.showModule = true;
						},1000);
					}
				}
			},
			deep: true,
			immediate: true,
		}
	},
	created() {
		if (!this.module.props.tabs) {
			this.module.props.tabs = [];
		}

		if (!this.module.props.tabs || this.module.props.tabs.length === 0) {
			this.module.props.tabs = [this.newTab('基本信息', this.$TOOL.uuid("tab"), true)];
		}

		this.module.props.tabs.forEach(tab => {
			tab.show = false;
			tab.name = this.$TOOL.uuid("tab");
			tab.widgets.forEach(widget=>{
				widget.titleStyle="tabTitle";
			});
		});
		this.isAlready = true;
	},
	mounted() {
		this.activeName = this.module.props.tabs[0].name;
	},
	methods: {
		dblClick: function () {
			this.drawerModel = true;
		},

		//当切换到添加分组tab时，禁止切换
		beforeLeave: function (activeName, oldActiveName) {
			if ('addTab' === activeName) {
				return false;
			}
		},
		newTab(label, name, closable) {
			return {
				label: label,
				name: name,
				widgets: [],
				closable: closable,
				colSpan: 8,
				widgetSize: 'small',
				labelWidth: 100,
				orderWeight: 0
			};
		},
		//添加卡片分组tab
		addTab: function () {
			if (!this.addForm.label || this.addForm.label.trim().length === 0) {
				this.$message.warning({message: '请输入分组名称'});
				return;
			}
			if (this.module.props.tabs.filter(tab => tab.label === this.addForm.label).length > 0) {
				this.$message.warning({message: '分组名称已存在'});
				return;
			}
			this.addForm.visible = false;
			let tab = this.newTab(this.addForm.label, this.$TOOL.uuid("tab"), true);
			tab.orderWeight = this.module.props.tabs.length + 1;
			this.module.props.tabs.push(tab);
			this.activeName = tab.name;
		},
		//删除分组时，重置该分组已布局的字段
		removeTab: function (tabName) {
			this.$confirm(`该分组已布局字段将全部清除`, '提示', {
				type: 'warning'
			}).then(() => {
				this.module.props.tabs.forEach((tab, index) => {
					if (tab.name === tabName) {
						let nextTab = this.module.props.tabs[index + 1] || this.module.props.tabs[index - 1];
						if (nextTab) {
							this.activeName = nextTab.name
						}
					}
				});
				this.module.props.tabs = this.module.props.tabs.filter((tab) => tab.name !== tabName);
			}).catch(() => {
			});
		},

		//置顶标签页
		topTab: async function (tabName) {
			let confirm = await this.$confirm('请确认是否将此标签页置顶', '提示', {type: 'warning'}).then(() => {
				return true;
			}).catch(() => {
				return false;
			});
			if (!confirm) return;
			let currentTab = null;
			this.module.props.tabs.forEach((tab, index) => {
				if (tab.name === tabName) {
					currentTab = tab;
				}
			});
			let otherTabs = this.module.props.tabs.filter((tab) => tab.name !== tabName);
			otherTabs.unshift(currentTab);
			this.module.props.tabs = otherTabs;
		},

		dragChange: function (widgets) {
			widgets.forEach((item, index) => {
				item.orderWeight = index;
			})
		},
	}
}
</script>
